<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<html>
<head>
    <meta charset="utf-8">
    <title>注册页</title>
</head>

<!--字体图标样式-->
<link href="${pageContext.request.contextPath}/static/javaex/pc/css/icomoon.css" rel="stylesheet"/>
<!--动画样式-->
<link href="${pageContext.request.contextPath}/static/javaex/pc/css/animate.css" rel="stylesheet"/>
<!--核心样式-->
<link href="${pageContext.request.contextPath}/static/javaex/pc/css/style.css" rel="stylesheet"/>
<!--jquery，当前版本不可更改jquery版本-->
<script src="${pageContext.request.contextPath}/static/javaex/pc/lib/jquery-1.7.2.min.js"></script>
<!--全局动态修改-->
<script src="${pageContext.request.contextPath}/static/javaex/pc/js/common.js"></script>
<!--核心组件-->
<script src="${pageContext.request.contextPath}/static/javaex/pc/js/javaex.min.js"></script>
<!--表单验证-->
<script src="${pageContext.request.contextPath}/static/javaex/pc/js/javaex-formVerify.js"></script>

<style>
    .login-bg {
        width: 100%;
        min-height: 100%;
        height: calc(100vh - 100px - 100px);
        /*  background-image: url("http://upload.javaex.cn/login-bg.jpg");*/
        background-image: url("/upload/log3.png");

        /*background-size: auto 100%;*/
        background-size: 100% 100%;
        /*   background-position: 45% center;
           background-repeat: no-repeat;*/
        position: relative;
    }

    .login-form {
        position: absolute;
        width: 288px;
        right: 600px;
        background: #fff;
        padding: 20px 38px 0;
        top: 25%;
    }

    .login-title {
        font-size: 20px;
        text-align: center;
        margin-bottom: 25px;
    }

    .login-item {
        display: flex;
        margin-bottom: 14px;
    }

    .login-link {
        margin-bottom: 14px;
    }

    .login-link label, .login-link a {
        color: #9B9B9C;
    }

    .login-link a {
        font-size: 14px;
    }

    .login-text {
        min-height: 40px;
        width: 100%;
        color: #B3B3B3;
        font-size: 14px;
        border: 1px solid #EEEFF0;
        border-radius: 3px;
        font-family: Helvetica, "microsoft yahei", sans-serif;
        padding-left: 16px;
        outline: none;
    }

    .button.login {
        background-color: #2D9C8B;
        color: white;
        width: 100%;
        border-radius: 3px;
        font-size: 14px;
        height: 40px;
        line-height: 40px;
    }

    .login-link .line {
        display: inline-block;
        width: 1px;
        height: 12px;
        background-color: #EEEEEE;
        margin: 0 6px;
    }
</style>
<body>
<%--!--顶部logo-->
<div style="width: 100%;height: 100px;display: flex;">
    <div style="width: 1200px;margin: 20px auto;">
        <a href="#">
            <img src="${pageContext.request.contextPath}/static/javaex/pc/images/logo.png"/>
        </a>
    </div>
</div>--%>
<!--中间主体信息-->
<!--全部主体内容-->
<div class="list-content">
    <!--块元素-->
    <div class="block">
        <!--修饰块元素名称-->
        <div class="banner">
            <p class="tab fixed">表单提交</p>
        </div>

        <!--正文内容-->
        <div class="main">
            <!--文本框-->
            <div class="unit">
                <div class="left"><span class="required">*</span><p class="subtitle">登录账号</p></div>
                <div class="right">
                    <input type="text" class="text" data-type="手机号|邮箱" error-msg="手机号或邮箱格式错误" error-pos="42" placeholder="请输入手机号或邮箱">
                </div>
                <!--清浮动-->
                <span class="clearfix"></span>
            </div>

            <!--单选框-->
            <div class="unit">
                <div class="left"><p class="subtitle">性别</p></div>
                <div class="right">
                    <ul class="equal-8">
                        <li><input type="radio" class="fill" name="sex" checked/>男</li>
                        <li><input type="radio" class="fill" name="sex" />女</li>
                        <!--清浮动-->
                        <span class="clearfix"></span>
                    </ul>
                </div>
                <!--清浮动-->
                <span class="clearfix"></span>
            </div>

            <!--复选框-->
            <div class="unit">
                <div class="left"><p class="subtitle">兴趣</p></div>
                <div class="right">
                    <ul class="equal-8">
                        <li><input type="checkbox" class="fill" name="interest" />吃饭</li>
                        <li><input type="checkbox" class="fill" name="interest" />睡觉</li>
                        <li><input type="checkbox" class="fill" name="interest" />打豆豆</li>
                        <!--清浮动-->
                        <span class="clearfix"></span>
                    </ul>
                </div>
                <!--清浮动-->
                <span class="clearfix"></span>
            </div>

            <!--下拉选择框-->
            <div class="unit">
                <div class="left"><p class="subtitle">学历</p></div>
                <div class="right">
                    <select id="select">
                        <option value="">请选择</option>
                        <option value="1">大专</option>
                        <option value="2">本科</option>
                        <option value="3">硕士</option>
                        <option value="4">博士</option>
                        <option value="5">博士后</option>
                    </select>
                </div>
                <!--清浮动-->
                <span class="clearfix"></span>
            </div>

            <!--日期选择框-->
            <div class="unit">
                <div class="left"><p class="subtitle">注册时间</p></div>
                <div class="right">
                    <input type="text" id="date" class="date" style="width: 200px;" value="" readonly/>
                </div>
                <span class="clearfix"></span>
            </div>

            <!--文本域-->
            <div class="unit">
                <div class="left"><p class="subtitle">简介</p></div>
                <div class="right">
                    <textarea class="desc" placeholder="请填写简介"></textarea>
                    <!--提示说明-->
                    <p class="hint">请填写个人简介。简介中不得包含令人反感的信息，且长度应在10到255个字符之间。</p>
                </div>
                <!--清浮动-->
                <span class="clearfix"></span>
            </div>

            <!--标签-->
            <div class="unit">
                <div class="left"><p class="subtitle">标签</p></div>
                <div class="right">
                    <div class="tagbox"></div>
                    <input type="hidden" id="tag" name="tag" value="" />
                </div>
                <!--清浮动-->
                <span class="clearfix"></span>
            </div>

            <!--提交按钮-->
            <div class="unit" style="width: 800px;">
                <div style="text-align: center;">
                    <!--表单提交时，必须是input元素，并指定type类型为button，否则ajax提交时，会返回error回调函数-->
                    <input type="button" id="return" class="button no" value="返回" />
                    <input type="button" id="save" class="button yes" value="保存" />
                </div>
            </div>
        </div>
    </div>
</div>
<%-- <!--底部版权信息-->
 <div style="width: 100%;height: 100px;text-align: center;line-height: 100px;">
     博客前端页面展示
 </div>--%>
</body>

<script>
    // javaex.select({
    //     id : "select",
    //     isSearch : false
    // });
    //
    // javaex.date({
    //     id : "date",	// 承载日期组件的id
    //     isTime : true,
    //     date : "2018-04-15 01:01:01",	// 选择的日期
    //     // 重新选择日期之后返回一个时间对象
    //     callback : function(rtn) {
    //         alert(rtn.date);
    //     }
    // });
    //
    // javaex.tag({
    //     id : "tag"
    // });
    //
    // // 监听点击保存按钮事件
    // $("#save").click(function() {
    //     // 表单验证函数
    //     if (javaexVerify()) {
    //         // 返回错误信息时，可以添加自定义异常提示。参数为元素id和提示
    //         // addErrorMsg("username", "用户名不存在");
    //         // 提交
    //         // $("#form").submit();
    //         alert("验证通过");
    //     } else {
    //         return false;
    //     }
    // });
    //
    // // 监听点击返回按钮事件
    // $("#return").click(function() {
    //     alert("返回");
    //     return false;
    // });
</script>
</html>


